<div class="ts-datepicker-hm no-select">
    <div class="ts-datepicker-ym-toolbar d-flex justify-content-between align-items-center">
        <div class="text-{{color}}">
            {{getTimeStr()}}
        </div>
        <div class="text-right" style="width:240px">
            <button (click)="setNow();confirmTime()" tsBtn sm class="ml-1" close>现在</button>
            <button (click)="setClean();" tsBtn sm class="ml-1" close>清空</button>
            <button (click)="confirmTime();" tsBtn sm class="ml-1" [color]="color" close>确认</button>
        </div>
    </div>
    <hr class="mb-2">
    <div class="d-flex text-center">
        <div class="ts-datepicker-hm-box" (wheel)="offsetTime($event,'hour',24)">
            <div (click)="offsetTime(-1,'hour',24)" class="pointer text-{{color}}-hover">
                <i class="fa fa-fw fa-lg fa-angle-up"></i>
            </div>
            <div *ngFor="let hour of getTimes(offsets['hour'],24);index as i" (click)="offsetTime(i-2,'hour',24)"
                class="ts-time-item pointer {{i===2&&'text-'+color+' active'}}">
                {{hour>9?hour:'0'+hour}}
            </div>
            <div (click)="offsetTime(+1,'hour',24)" class="pointer text-{{color}}-hover">
                <i class="fa fa-fw fa-lg fa-angle-down"></i>
            </div>
        </div>
        <div class="ts-datepicker-hm-box" (wheel)="offsetTime($event,'minute',60)">
            <div (click)="offsetTime(-1,'minute',60)" class="pointer text-{{color}}-hover">
                <i class="fa fa-fw fa-lg fa-angle-up"></i>
            </div>
            <div *ngFor="let minute of getTimes(offsets['minute'],60);index as i" (click)="offsetTime(i-2,'minute',60)"
                class="ts-time-item pointer {{i===2&&'text-'+color+' active'}}">
                {{minute>9?minute:'0'+minute}}
            </div>
            <div (click)="offsetTime(+1,'minute',60)" class="pointer text-{{color}}-hover">
                <i class="fa fa-fw fa-lg fa-angle-down"></i>
            </div>
        </div>
        <div class="ts-datepicker-hm-box" (wheel)="offsetTime($event,'second',60)">
            <div (click)="offsetTime(-1,'second',60)" class="pointer text-{{color}}-hover">
                <i class="fa fa-fw fa-lg fa-angle-up"></i>
            </div>
            <div *ngFor="let second of getTimes(offsets['second'],60);index as i" (click)="offsetTime(i-2,'second',60)"
                class="ts-time-item pointer {{i===2&&'text-'+color+' active'}}">
                {{second>9?second:'0'+second}}
            </div>
            <div (click)="offsetTime(+1,'second',60)" class="pointer text-{{color}}-hover">
                <i class="fa fa-fw fa-lg fa-angle-down"></i>
            </div>
        </div>
    </div>
</div>